<template>
  <div class="app-container">

    <div v-loading="loading" >
      <el-row :gutter="20">
        <el-col :span="18">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="活动列表" name="activityList"></el-tab-pane>
            <el-tab-pane label="我的活动" name="myActivity"></el-tab-pane>
          </el-tabs>
          <el-empty v-if="activityList.length === 0" description="暂无活动"></el-empty>
          <el-card v-if="activityList.length > 0" v-for="(item,index) in activityList" :key="index" class="box-card">
            <div slot="header" class="clearfix">
              <span>活动时间：{{item.startTime}}</span>
              <dict-tag :options="dict.type.postulant_activity_state" :value="item.state" style="display: inline-block;margin-left: 20px;"/>

              <template v-if="activeIndex==0">
                <el-button v-if="item.applyNum > 0"  style="float: right; padding: 3px 0" type="text">已报名</el-button>
                <el-button v-else @click="addApply(item.id)" style="float: right; padding: 3px 0" type="text">报名</el-button>
              </template>
              <template v-if="activeIndex==1">
                <el-button @click="updateApplyOpen(item.applyId)" style="float: right; padding: 3px 0;" type="text">签退</el-button>
                <el-button @click="addFeedBack(item.id)" style="float: right; padding: 3px 0;margin-right: 20px;" type="text">反馈</el-button>
              </template>
            </div>
            <div style="width: 100%;display: flex;">
              <image-preview :src="item.image" :width="200" :height="200"/>
              <div style="width: 100%;margin-left: 20px;">
                <div style="height: 30px;font-weight: 700;">{{item.title}}</div>
                <div style="height: 30px;font-size: 14px;">{{item.localtion}}</div>
                <div style="width: 100%;height: 110px;" v-html="item.content"></div>
                <div style="font-size: 12px;color: #999999;">
                  <dict-tag :options="dict.type.postulant_activity_type" :value="item.type" style="display: inline-block;margin-right: 10px;"/>
                  <span>{{item.createTime}}</span>
                  <el-button v-if="activeIndex==1" @click="openActivityFile(item.id)" style="margin-left: 20px;" type="text">活动文件</el-button>
                </div>
              </div>
            </div>
          </el-card>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getActivityList"
          />
        </el-col>
        <el-col :span="6">
          <el-tabs>
            <el-tab-pane label="消息通知" name="activityList"></el-tab-pane>
          </el-tabs>
          <el-empty v-if="messageList.length === 0" description="暂无通知"></el-empty>
          <el-card v-if="messageList.length > 0" v-for="(item,index) in messageList" :key="index" class="box-card">
            <div slot="header" class="clearfix">
              <span style="font-weight: 700;">{{ item.title }}</span>
              <span style="font-size: 12px;color: #666666;float: right; padding: 3px 0">{{ item.createTime }}</span>
            </div>
            <div style="font-size: 14px;min-height: 50px;">{{item.content}}</div>
            <div style="text-align: right;">
              <el-button @click="updateMessage(item.id)" type="text" class="button">已读</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <actFile ref="actFile"></actFile>

    <!-- 添加或修改评价反馈对话框 -->
    <el-dialog title="填写活动反馈" :visible.sync="feedbackOpen" width="500px" append-to-body>
      <el-form ref="form" :model="feedback" label-width="80px">
        <el-form-item label="反馈图片" prop="image">
          <image-upload v-model="feedback.image"/>
        </el-form-item>
        <el-form-item label="反馈内容">
          <editor v-model="feedback.content" :min-height="192"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="feedback.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addFeedback">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改活动报名对话框 -->
    <el-dialog title="活动签退" :visible.sync="applyOpen" width="500px" append-to-body>
      <el-form ref="form" :model="apply" label-width="80px">
        <el-form-item label="完成图片" prop="image">
          <image-upload v-model="apply.image"/>
        </el-form-item>
        <el-form-item label="完成内容">
          <editor v-model="apply.content" :min-height="192"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="apply.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateApply">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getActivityList, getApplyActivityList } from '@/api/postulant/activity'
import { addApply, getApply, updateApply } from '@/api/postulant/apply'
import { getMessageList, updateMessage } from '@/api/postulant/message'
import { addFeedback } from '@/api/postulant/feedback'

import actFile from "@/views/postulant/file/index.vue"
export default {
  name: "Index",
  dicts: ['postulant_activity_state', 'postulant_activity_type'],
  components: { actFile },
  data() {
    return {
      activeIndex: 0,
      activeName: 'activityList',

      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: null,
        image: null,
        content: null,
        startTime: null,
        endTime: null,
        localtion: null,
        num: null,
        sort: null,
        type: null,
        state: null,
      },
      messageList: [],
      activityList: [],
      total: 0,

      feedbackOpen: false,
      feedback: {
        id: null,
        userId: null,
        activityId: null,
        image: null,
        content: null,
        state: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      },

      applyOpen: false,
      apply: {
        id: null,
        userId: null,
        activityId: null,
        image: null,
        content: null,
        type: null,
        state: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      },
    };
  },
  created() {
    this.getActivityList();
    this.getMessageList();
  },
  methods: {
    handleClick(e){
      this.activeIndex = e.index;
      if(e.index == 0){
        this.getActivityList();
      }else if(e.index == 1){
        this.getApplyActivityList();
      }
    },
    /** 查询活动列表 */
    getActivityList() {
      this.loading = true;
      getActivityList(this.queryParams).then(response => {
        this.activityList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询活动列表 */
    getApplyActivityList() {
      this.loading = true;
      getApplyActivityList(this.queryParams).then(response => {
        this.activityList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    addApply(activityId){
      addApply({
        activityId: activityId
      }).then(response => {
        this.$modal.msgSuccess("报名成功");
        this.getActivityList();
      });
    },
    /** 查询消息记录列表 */
    getMessageList() {
      getMessageList({
        state: 0,
        pageNum: 1,
        pageSize: 1000,
      }).then(response => {
        this.messageList = response.rows;
      });
    },
    updateMessage(messageId){
      updateMessage({
        id: messageId,
        state: 1
      }).then(response => {
        this.$modal.msgSuccess("已读");
        this.getMessageList();
      });
    },
    addFeedBack(activityId){
      this.feedback = {
        id: null,
        userId: null,
        activityId: activityId,
        image: null,
        content: null,
        state: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      };
      this.feedbackOpen = true;
    },
    addFeedback(){
      addFeedback(this.feedback).then(response => {
        this.feedbackOpen = false;
        this.$modal.msgSuccess("新增成功");
      });
    },
    // 取消按钮
    cancel() {
      this.feedbackOpen = false;
      this.applyOpen = false;
    },

    updateApplyOpen(applyId){
      getApply(applyId).then(response => {
        this.apply = response.data;
        this.applyOpen = true;
      });
    },
    updateApply(){
      updateApply(this.apply).then(response => {
        this.$modal.msgSuccess("保存成功");
        this.applyOpen = false;
      });
    },

    openActivityFile(activityId){
      this.$refs.actFile.getFileList(activityId, 1);
    },
  }
};
</script>

<style scoped lang="scss">
.box-card{
  margin: 20px 0;
}
</style>

